<template>
  <view class="publish-container">
    <!-- 图片上传区域 -->
    <view class="image-upload">
      <view class="image-box" v-for="(img, index) in images" :key="index">
        <image :src="img" class="preview-img" mode="aspectFill" />
      </view>
      <view class="image-box add-box" @tap="chooseImage">
        <text class="plus">+</text>
      </view>
    </view>

    <!-- 标题输入 -->
    <input v-model="title" placeholder="添加标题" class="input-title" />

    <!-- 正文输入 -->
    <textarea v-model="content" placeholder="添加正文" class="input-content" />

    <!-- 拍摄建议 -->
    <textarea v-model="suggestion" placeholder="拍摄建议（选填）" class="input-content" />

    <!-- 拍摄时间选择 -->
    <view class="form-item">
      <text class="label">拍摄时间：</text>
      <picker mode="date" :value="shootDate" @change="onDateChange">
        <view class="picker">{{ shootDate }}</view>
      </picker>
    </view>

    <!-- 拍摄景点选择 -->
    <view class="form-item">
      <text class="label">拍摄景点：</text>
      <picker :range="spots" @change="onSpotChange">
        <view class="picker">{{ selectedSpot }}</view>
      </picker>
    </view>

    <!-- 拍摄详细地点 -->
    <input v-model="locationDetail" placeholder="拍摄详细地点" class="input-title" />

    <!-- 发布按钮 -->
    <button class="submit-btn" type="primary" @tap="submit">发布笔记</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      title: '',
      content: '',
      suggestion: '',
      shootDate: '',
      spots: ['中央公园', '人民广场', '海边栈道', '古镇街巷'],
      selectedSpot: '请选择景点',
      locationDetail: ''
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.images.push(res.tempFilePaths[0]);
        }
      });
    },
    onDateChange(e) {
      this.shootDate = e.detail.value;
    },
    onSpotChange(e) {
      this.selectedSpot = this.spots[e.detail.value];
    },
    submit() {
      if (!this.title || !this.content) {
        return uni.showToast({
          title: '请填写标题和正文',
          icon: 'none'
        });
      }

      // 这里只是模拟提交逻辑
      console.log('发布内容：', {
        title: this.title,
        content: this.content,
        suggestion: this.suggestion,
        date: this.shootDate,
        spot: this.selectedSpot,
        locationDetail: this.locationDetail,
        images: this.images
      });

      uni.showToast({
        title: '发布成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.publish-container {
  padding: 20rpx;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.image-box {
  width: 200rpx;
  height: 200rpx;
  background-color: #f0f0f0;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-img {
  width: 100%;
  height: 100%;
}

.add-box {
  background-color: #fafafa;
  border: 1px dashed #ccc;
}

.plus {
  font-size: 60rpx;
  color: #bbb;
}

.input-title,
.input-content {
  width: 100%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.input-content {
  min-height: 100rpx;
}

.form-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.label {
  width: 200rpx;
  font-size: 28rpx;
  color: #333;
}

.picker {
  flex: 1;
  font-size: 28rpx;
  color: #666;
}

.submit-btn {
  background-color: rgb(90,146,208);
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx 0;
  border-radius: 50rpx;
  margin-top: 40rpx;
}
</style>
